<!-- eslint-disable no-undef -->
<template>
  <div>
    <el-col>
      <el-menu router>
        <el-menu-item index="userManager">
          <span class="sp2">
            <el-icon><User /></el-icon>
          </span>
          <span>用户管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <!-- 搜索框 -->
    <search-bar />
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="userCode" label="用户编号" width="180" />
      <el-table-column prop="userName" label="姓名" width="180" />
      <el-table-column prop="userAge" label="年龄" />
      <el-table-column prop="userPhone" label="手机号" />
      <el-table-column prop="enable" label="是否消费">
        <template #default="{ row }">
          <div>
            <el-switch
              v-model="row.onsale"
              inline-prompt
              active-text="是"
              @change="switchSaleState(row.id, row.onsale)"
              inactive-text="否"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="操作">
        <!-- 点击按钮弹出抽屉 -->
        <el-button
          type="primary"
          style="margin-left: 16px"
          @click="drawer = true"
        >
          用户详情
        </el-button>
        <!-- 抽屉 -->
        <el-drawer
          v-model="drawer"
          title="李明"
          :direction="direction"
          :before-close="handleClose"
        >
          <span>Hi, there!</span>
        </el-drawer>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { userMan, updateUser } from '../../api/user'
import SearchBar from '../../components/SearchBar.vue'
export default {
  name: 'UserManager',
  data () {
    return {
      tableData: [],
      drawer: false
    }
  },
  methods: {
    userQ () {
      console.log(111)
      userMan().then((res) => {
        if (res.data.code === 200) {
          console.log(res)
          this.tableData = res.data.data
        }
      })
    },
    switchSaleState (enable) {
      // 行内修改商品选中状态
      updateUser({
        enable
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 2000,
            onClose: () => {}
          })
        }
      })
    }
  },
  created () {
    this.userQ()
  },
  components: {
    SearchBar
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 25px;
}
.sp2{
  color: #ffd04b;
}
</style>
